<template>
	<view class="container" :style="{ 'background':'#f5f7fa'}">
		<shopro-navbar :isBack="true" :background="{'background':'#f5f7fa'}">
			<text
				slot="content"
				class="u-flex u-flex-center u-flex-items-center"
				style="color: #000; width: 85%; text-align: center;padding-left: 20rpx;height: 100%;"
			>
			</text>
		</shopro-navbar>
		<view class="phone-title">{{ maskedPhone }}</view>
		<view class="phone-desc">更换后可用新手机号登录</view>
		<view class="input-group">
			<input class="input" type="number" maxlength="11" placeholder="请输入新的手机号码" v-model="newPhone" />
		</view>
		<view class="input-group code-group">
			<input class="input" type="number" maxlength="6" placeholder="请输入收到的验证码" v-model="code" />
			<button class="code-btn" :disabled="codeBtnDisabled" @click="getCode">{{ codeBtnText }}</button>
		</view>
		<button class="submit-btn" :disabled="!canSubmit" @click="submitChange">确认更换</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentPhone: '18512340897', // 假设当前手机号，实际应从用户信息获取
			newPhone: '',
			code: '',
			codeBtnText: '获取验证码',
			codeBtnDisabled: false,
			codeTimer: null,
			codeCountdown: 60
		};
	},
	computed: {
		maskedPhone() {
			// 中间四位用*号隐藏
			return this.currentPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
		},
		canSubmit() {
			// 新手机号11位，验证码6位才可提交
			return this.newPhone.length === 11 && this.code.length === 6;
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		getCode() {
			if (!/^1[3-9]\d{9}$/.test(this.newPhone)) {
				uni.showToast({ title: '请输入有效的新手机号', icon: 'none' });
				return;
			}
			// 预留：请求验证码接口
			// this.$api.sendCode({ phone: this.newPhone })
			this.codeBtnDisabled = true;
			this.codeBtnText = `${this.codeCountdown}s`;
			this.codeTimer = setInterval(() => {
				this.codeCountdown--;
				if (this.codeCountdown <= 0) {
					clearInterval(this.codeTimer);
					this.codeBtnText = '获取验证码';
					this.codeBtnDisabled = false;
					this.codeCountdown = 60;
				} else {
					this.codeBtnText = `${this.codeCountdown}s`;
				}
			}, 1000);
		},
		submitChange() {
			if (!this.canSubmit) return;
			// 预留：提交更换手机号接口
			// this.$api.changePhone({ oldPhone: this.currentPhone, newPhone: this.newPhone, code: this.code })
			uni.showToast({ title: '更换手机号功能待接入', icon: 'none' });
		}
	},
	beforeDestroy() {
		if (this.codeTimer) clearInterval(this.codeTimer);
	}
};
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background: #f8fafc;
	padding: 0 32rpx;
	box-sizing: border-box;
	position: relative;
}
.back-icon {
	position: absolute;
	left: 24rpx;
	top: 60rpx;
	font-size: 44rpx;
	color: #333;
}
.phone-title {
	margin-top: 160rpx;
	text-align: center;
	font-size: 48rpx;
	font-weight: bold;
	color: #222;
}
.phone-desc {
	text-align: center;
	color: #999;
	font-size: 28rpx;
	margin-bottom: 80rpx;
}
.input-group {
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 32rpx;
	display: flex;
	align-items: center;
	padding: 0 24rpx;
	height: 96rpx;
}
.input {
	flex: 1;
	font-size: 32rpx;
	border: none;
	background: transparent;
	outline: none;
}
.code-group {
	justify-content: space-between;
}
.code-btn {
	color: #2a7bff;
	background: none;
	border: none;
	font-size: 30rpx;
	padding: 0 12rpx;
}
.submit-btn {
	width: 100%;
	height: 96rpx;
	background: #a5c8ff;
	color: #fff;
	font-size: 36rpx;
	border-radius: 48rpx;
	margin-top: 48rpx;
	border: none;
	opacity: 1;
}
.submit-btn:disabled {
	background: #e3eaf5;
	color: #bfc8d6;
	opacity: 1;
}
</style>
